<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp" %>


<style type="text/css">
td.querytitle {background-color:#DBDBDB;text-align: right;font-weight: 600;padding-right: 10px;}

.or {
    background: none repeat scroll 0 0 #69A74E;
   	/* background-image:url('close.png');
    background-repeat:no-repeat; */
    border: medium none;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 300;
    /* margin-right: 1px; */
    padding: 2px 2px 2px 4px;
    /* padding: 2px; */
    border:1px solid #333333;
    letter-spacing: 1px;
    cursor: pointer;
}

.or_1 {
    background: none repeat scroll 0 0 #efefef;
    border: medium none;
    color: #69A74E;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 2px 2px 2px 4px;
    border:0px solid #333333;
    cursor: pointer;
}
.and {
    background: none repeat scroll 0 0 red;
    border: medium none;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 300;
  	padding: 2px 2px 2px 4px;
    border:1px solid #333333;
    cursor: pointer;
}

.and_1 {
    background: none repeat scroll 0 0 #efefef;
    border: medium none;
    color: red;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 2px 2px 2px 4px;
    border:0px solid #333333;
    letter-spacing: 1px;
    cursor: pointer;
}

input.groovybutton{
   font-size:12px;
   /* font-family:Arial,sans-serif; */
   height:22px;
   background-color:#779999;
   background-image:url(${pageContext.request.contextPath}/resource/image/back03.gif);
   border-style:solid;
   border-color:#DDDDDD;
   border-width:1px;
   cursor: pointer;
}
</style>
<script>

var _len = 0;
var _width = 0;

function chgImg(obj,_img){
	$("#" + obj.id + " > img").attr("src","${appPath }/resource/image/" + _img);
}

function addBoolean(n){
	var qrlen = $(".qr").length;
	
	_width = 85 / (parseInt(qrlen) + 1);
	
	var _id = $(".qr").get(qrlen - 1).id;
	
	
	$("#div_qr input").each(function(){
		$(this).css("width",_width + "%");
	});
	
	var id_number = parseInt(_id.replace("qr_","")) + 1;
	
	var newQR = "<input type='text' style='width:"+_width+"%;height: 18px;vertical-align: middle;' name='qr' class='qr bar_1' id='qr_"+id_number+"'/>";
	
	//var newOR = "<span class='or_1' onclick='remove(this);' id='_boolean_"+id_number+"' style='font-family: \"Arial Unicode MS\"'>or</span>";
	
	var CommProperty = "id='_boolean_"+id_number+"' onclick='remove(this);' style='vertical-align: middle;cursor: pointer;' border='0' width=20 height=20  title='移除'";
	var newOR = "<span id='_span_"+id_number+"' class='or_2' onmouseover='chgImg(this,\"green_close3.gif\");' onmouseout='chgImg(this,\"green.gif\");'><img src='${appPath }/resource/image/green.gif' "+CommProperty+"/></span>";
	
	//var newAND = "<span class='and_1' onclick='remove(this);' id='_boolean_"+id_number+"' style='font-family: \"Arial Unicode MS\"'>and</span>";
	var newAND = "<span id='_span_"+id_number+"' class='and_2' onmouseover='chgImg(this,\"red_close3.gif\");' onmouseout='chgImg(this,\"red.gif\");'><img src='${appPath }/resource/image/red.gif' "+CommProperty+"/></span>";
	
	var combine = n == 'or' ? newOR + newQR : newAND + newQR;

	$("#" + _id).after(combine);
	
	$("#qr_" + id_number).focus();
	
	_len++;
}

function test(n,_id){
	var _id_number = _id.replace(/_boolean_/i,"");
	
	$("#_boolean_"+ _id_number).before("<span style='color:red'>aa");
	$("#_boolean_"+ _id_number).after("</span>");
}

function remove(obj){
	var _id = parseInt(obj.id.replace(/_boolean_/i,""));
	$("#_span_" + _id).remove();
	$("#qr_" + _id).remove();
	$(obj).remove();	
	var qrlen = $(".qr").length;	
	_width = 90 / parseInt(qrlen);	
	$("#div_qr input").each(function(){
		$(this).css("width",_width + "%");
	});	
}

function getValue(){
	var inputArray = new Array();
	var bolenArray = new Array();
	
	$("#div_qr input").each(function(){
		inputArray[inputArray.length] = $(this).val();
	});
	
	
	$("#div_qr span").each(function(){
		bolenArray[bolenArray.length] = this.className.replace(/_1/i,"");
	});
	
	$("#QueryAAFForm input[name=qr]").val(inputArray);
	//alert(bolenArray);
}

function showYearType(n){
	//var _year_type1 = new Array("","≧","≦",'＝',"～");
	var _year_type2 = new Array("","大(等)於","小(等)於",'等於',"區間");
	
	$("#year_type_span2").html(_year_type2[n]);
	
	if(n == 4)
		$("#show_yearEqMode").show();
	else
		$("#show_yearEqMode").hide();
}

function selYearType(n){
	if(n == 1){
		$('#year_type_span1').show();
		$('#year_type_span2').hide();
	}
	
	else if(n == 2){
		$('#year_type_span1').hide();
		$('#year_type_span2').show();
	}
}

function chgQueryType(n){
	var arrow_l = "<img src='${appPath }/resource/image/arror-l.png' border='0' />&nbsp;&nbsp;";
	var arrow_r = "&nbsp;&nbsp;<img src='${appPath }/resource/image/arror-r.png' border='0' />";
	
	var msg = (n == 1) ? "進階查詢" + arrow_r : arrow_l + "資料編號查詢";
	var QUERY1 = (n == 1) ? "#DIV_ADV_QUERY" : "#DIV_REC_QUERY";
	var QUERY2 = (n == 1) ? "#DIV_REC_QUERY" : "#DIV_ADV_QUERY";
	
	
	$(QUERY1).slideUp("fast",function(){
		$(QUERY2).slideDown("fast",function(){
			$("#queryLink").html(msg);
		});
	});
	
	$("#queryLink").unbind('click').bind("click", function() {
		chgQueryType(n == 1 ? 2 : 1);
	});
}

$(function(){
	$("#queryLink").bind("click", function() {
		chgQueryType(1);
	});
});
 
</script>



<div id="xxx">

<form:form modelAttribute="QueryAAFForm" method="post">
	<div id="area">
	
		<table style="width:800px;">
			<tr>
				<td style="text-align: left;padding-left:5px;" >
					<span id="queryLink" style="cursor: pointer;">
						<img src='${appPath }/resource/image/arror-l.png' border='0' />&nbsp;&nbsp;資料編號查詢
					</span>
				</td>
			</tr>
		</table>
		
		<div id="DIV_REC_QUERY" style="display:none;">
			<table style="width:800px;border:1px solid #D2D9E7;">
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">
						<div>
							資料編號查詢&nbsp;
							<a href="javascript:void(0);" onclick="$('#info1Overlay').fadeIn('fast')">
								<img src="${appPath }/resource/image/1320847230_information.png" border="0" style="vertical-align:middle;"/>
							</a>
						</div>
					</td>
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
						
						<form:input path="rec_no" cssClass="bar_1" cssStyle="width:200px;"/>
						<input type="button" style="width:60px;" value="編號查詢" class="groovybutton" onclick="_recquery();"/>
						<input type="button" style="width:60px;" value="清空" class="groovybutton" onclick="$('#rec_no').val('');"/>
						
					</td>
				</tr>
			</table>
		</div>
	
		<div id="DIV_ADV_QUERY">
			<table style="width:800px;border:1px solid #D2D9E7;">
				<%--
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">資料編號查詢</td>
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
						
						<form:input path="rec_no" cssClass="bar_1" cssStyle="width:200px;"/>
						<input type="button" style="width:60px;" value="編號查詢" class="groovybutton" onclick="_recquery();"/>
						<input type="button" style="width:60px;" value="清空" class="groovybutton" onclick="$('#rec_no').val('');"/>
						<img src="${appPath }/resource/image/1320113794_question_blue.png" />
					</td>
				</tr>
				<tr class="trContent">
					<td colspan="2" height="1px;" style="background-color: #9a9a9a">
						
					</td>				
				</tr>
				--%>
				
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">字串查詢</td>	
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
					<%-- 
						<div style="font-family: 'Arial Unicode MS'">
							<span class="or" onclick="addBoolean('or');">or</span>						
							<span class="and" onclick="addBoolean('and');">and</span>
						</div>
					--%>
						<div style="font-family: 'Arial Unicode MS'">
							<table style="width:100px;border:0;border-collpase:collpase;color: white;">
								<tr>
									<td style="background-color: green;text-align: center;cursor: pointer;width: 50%;" onclick="addBoolean('or');">or</td>
									<td style="background-color: red;text-align: center;cursor: pointer;width: 50%;" onclick="addBoolean('and');">and</td>
								</tr>
							</table>									
						</div>
					
					
						<div id="div_qr" style="padding-bottom: 8px;">
							<input type="text" style="width:90%;height: 18px;vertical-align: middle;" name="qr" class="qr bar_1" id="qr_1" />
						</div>
						<%-- <form:input path="keyword_o" cssClass="bar_1" cssStyle="width:90%;"/> --%>
					</td>
				</tr>
				
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">出版年</td>
					
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;height:40px;" >
						<form:select path="year_type" cssClass="bar_1" cssStyle="width:40px;" onchange="showYearType(this.value);">
							<form:option value="1" label="≧"/>
							<form:option value="2" label="≦"/>
							<form:option value="3" label="＝"/>
							<form:option value="4" label="～"/>
						</form:select>					
						<form:select path="start_year" cssStyle="width:60px;" cssClass="bar_1">
							<form:option value="1" label="不明"/>			
							<c:forEach var="year" begin="1981" end="2012" varStatus="s">
								<form:option value="${year }" label="${year }"/>								
							</c:forEach>
						</form:select>
						<span id="show_yearEqMode" style="display:none">
							～
							<form:select path="end_year" cssStyle="width:60px;" cssClass="bar_1">
								<c:forEach var="year" begin="1981" end="2012" varStatus="s">
									<form:option value="${year }" label="${year }"/>								
								</c:forEach>
							</form:select>
						</span>
					</td>
					
					<%-- 
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;height:40px;" onmouseover="selYearType(1);" onmouseout="selYearType(2);" >					
						<table style="width:100%;">
							<tr>
								<td style="width:70px;text-align: center;height:40px;">
									<span id="year_type_span1" style="display:none">
										<form:select path="year_type" cssClass="bar_1" cssStyle="width:40px;" onchange="showYearType(this.value);">
											<form:option value="1" label="≧"/>
											<form:option value="2" label="≦"/>
											<form:option value="3" label="＝"/>
											<form:option value="4" label="～"/>
										</form:select>
									</span>
									<span id="year_type_span2" style='font-size: 10px;'>大(等)於</span>
								</td>
								<td>			
									<form:select path="start_year" cssStyle="width:60px;" cssClass="bar_1">
										<form:option value="1" label="不明"/>			
										<c:forEach var="year" begin="1981" end="2012" varStatus="s">
											<form:option value="${year }" label="${year }"/>								
										</c:forEach>
									</form:select>
									<span id="show_yearEqMode" style="display:none">
										～
										<form:select path="end_year" cssStyle="width:60px;" cssClass="bar_1">
											<c:forEach var="year" begin="1981" end="2012" varStatus="s">
												<form:option value="${year }" label="${year }"/>								
											</c:forEach>
										</form:select>
									</span>
								</td>
							</tr>
						</table>
					</td>
					--%>
				</tr>
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">語文</td>
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
						<table style="width:100%">
							<tr>
								<td style="width:30px;">
									<input type="checkbox" id="language_all" onclick="checkall('language')" checked="checked"/>
								</td>
								<td>			
									<c:forEach var="lans" items="${CodeLanguage}">
										<form:checkbox path="language" value="${lans.code }" label="${lans.name }" checked="checked"/>
									</c:forEach>
								</td>
							</tr>
						</table>					
					</td>
				</tr>
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">資料類型</td>
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
						<table style="width:100%">
							<tr>
								<td style="width:30px;">
									<input type="checkbox" id="doc_type_all" onclick="checkall('doc_type')" checked="checked"/>
								</td>
								<td>			
									<form:checkbox path="doc_type" value="1" label="期刊論文" checked="checked"/>
									<form:checkbox path="doc_type" value="2" label="圖書/圖書章節" checked="checked"/>
									<form:checkbox path="doc_type" value="3" label="報告" checked="checked"/><br/>
									<form:checkbox path="doc_type" value="4" label="會議論文/會議論文集" checked="checked"/>
									<form:checkbox path="doc_type" value="5" label="學位論文" checked="checked"/>
									<form:checkbox path="doc_type" value="6" label="手冊/教材" checked="checked"/>		
								</td>
							</tr>
						</table>
					</td>
				</tr>
				
				<!-- ------------------------------------------------------------------ -->
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">文獻性質</td>
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
						<table style="width:100%">
							<tr>
								<td style="width:30px;">
									<input type="checkbox" id="literature_all" onclick="checkall('literature')" checked="checked"/>
								</td>
								
								<td>								
									<form:checkbox path="literature" value="1" label="&nbsp;original paper" checked="checked"/>
									<form:checkbox path="literature" value="2" label="&nbsp;review" checked="checked"/>
									<form:checkbox path="literature" value="3" label="&nbsp;disscussion" checked="checked"/>
									<form:checkbox path="literature" value="4" label="其他" checked="checked"/>								 
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<!-- ------------------------------------------------------------------- -->
				
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">探討植物別</td>
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
						<span id="span_selectedCodePlants" style="color:green;font-weight: 300;"></span>
						<span style="color:blue;cursor: pointer;" onclick="getCodePlantQuery(null,true);" class="editField">
							選取植物別
							<span id="plantLoadingImg" style="display:none">
								<img src="${appPath }/resource/image/ajax-loader.gif" />
							</span>
						</span>
					</td>
				</tr>
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">探討國別</td>
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
						<span id="span_selectedCodeCountries" style="color:green;font-weight: 300;"></span>
						<span style="color:blue;cursor: pointer;" onclick="getCodeCountryQuery(null,true);" class="editField">
							選取國別
							<span id="countryLoadingImg" style="display:none">
								<img src="${appPath }/resource/image/ajax-loader.gif" />
							</span>
						</span>
					</td>
				</tr>
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">主題分類</td>
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">				
						<table style="width:100%">
							<tr>
								<td style="width:30px;">
									<input type="checkbox" id="clazz_all" onclick="checkall('clazz')" checked="checked"/>
								</td>
								<td>			
									<form:checkbox path="clazz" value="A" label="生物安全政策與法規" checked="checked"/>
									<form:checkbox path="clazz" value="B" label="風險評估與風險管理" checked="checked"/><br/>
									<form:checkbox path="clazz" value="C" label="社經與貿易議題" checked="checked"/>
									<form:checkbox path="clazz" value="D" label="公眾認知" checked="checked"/>
									<form:checkbox path="clazz" value="E" label="其他" checked="checked"/>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr class="trContent">
					<td class="querytitle" style="width:120px;">建立者</td>
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">				
						<form:select path="created_users">
							<form:option value="0" label="全部"/>    
							<form:options items="${FormUsers }" itemValue="seq_no" itemLabel="fullname"/>    
						</form:select>
					</td>
				</tr>	
				
				<%-- 
				<tr class="trContent">
					<td class="querytitle">中譯標題</td>
					<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
						<input type="text" class="bar_1" style="width:90%;"/>
					</td>
				</tr>
				--%>
				
				<tr style="background-color: #F2F2F2;">
					<td colspan="2" >
						<div style="width:100%;text-align:center;padding-top:20px;padding-bottom:20px;">									
							<span class="button_1" style="width:60px;padding: 6px 10px 6px 10px;" onclick="_reset();">清　除</span>								
							<span class="button" style="width:60px;" onclick="_query();">查　詢</span>			
						</div>
					</td>
				</tr>	
			</table>
		</div>
		
	</div>
	
	<table style="width:800px;border:1px solid #D2D9E7;">
		<tr>
			<td colspan="2">
				<table style="width:100%;" id="expandDescTable">
					<tr>
						<td style="width:90%;height:30px;padding-left:10px;letter-spacing: 4px;" id="expandDescTd"></td>
						<td style="text-align: center;" id="slide_icon" >
							<img src="${appPath }/resource/image/1318497647_br_up.png" style="cursor: pointer;" onclick="expand(1,'slow');"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	
	<form:hidden path="plants_code" />
	<form:hidden path="plants_name_ch" />
	<form:hidden path="countries_code" />
	<form:hidden path="countries_name_ch" />
	<form:hidden path="rowsPerPage" />
	<form:hidden path="flow" />
	<form:hidden path="qr_boolean" />
	<form:hidden path="query_type" />
</form:form> 

</div>